<script setup>
import {onMounted, ref} from 'vue';
import {addSource, deleteSource, selectSource} from "@/api/source.js";
import { useRouter } from 'vue-router';
import {ElMessage, ElMessageBox} from 'element-plus'
import {addCustomer, deleteCustomer} from "@/api/sale.js";


// 控制是否展开的状态
const isExpanded = ref(false);
// 切换展开状态的方法
const toggleExpand = () => {
  look.value =!look.value;
  isExpanded.value =!isExpanded.value;
  // 触发自定义事件并传递属性值
};


// 控制日是否展开的状态2
const Expanded = ref(false);
// 切换展开状态的方法2
const goToAdd= () => {
  Expanded.value =!Expanded.value;
  // 触发自定义事件并传递属性值
};





const look=ref(true);

//重置表单
const resetForm = () => {
  CgOrder.value = {
    proName: '',
    quantity: '',
    price: '',
    renSona: ''
  };
}


//定义一个采购对象
const CgOrder=ref({
  proName:'',//采购物品名称
  quantity:'',//采购数量
  price:'',//单价
  renSona:''//申请采购理由
})
//自定义的响应式数组
const tableData =ref([])
//查询按钮
const select=async()=>{
  const response=await selectSource()
  tableData.value= response.data.data
}

//添加按钮
const submitForm = async () => {
  const add = await addSource(CgOrder.value)
  ElMessage.success(add.data.message)
  await select()
  resetForm()
}

//撤销
const del = (row) => {
  ElMessageBox.confirm(
      '确定要撤销此采购申请吗？',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async ()=>{
        const rows=await deleteSource(row.id)
        ElMessage(rows.data.message)
        await select();
      }
  )
}
onMounted(()=>{
  select()
})


</script>

<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card>
        <el-button type="primary" @click="goToAdd()">
          添加采购
        </el-button>

        <el-form
            class="calendar-wrapper"
            :model="CgOrder"
            :style="{
               height: Expanded? '250px' : '0',
               overflow: 'hidden',
               width: '300px',
             }"
            :class="{ 'expand-transition': Expanded }"
            ref="formRef" label-width="auto">

          <el-form-item label="采购物品名称" prop="proName">
            <el-input v-model="CgOrder.proName" placeholder="采购物品名称"></el-input>
          </el-form-item>

          <el-form-item label="采购数量" prop="quantity">
            <el-input v-model="CgOrder.quantity" placeholder="采购数量"></el-input>
          </el-form-item>

          <el-form-item label="单价" prop="price">
            <el-input v-model="CgOrder.price" placeholder="单价"></el-input>
          </el-form-item>

          <el-form-item label="申请采购理由" prop="renSona">
            <el-input v-model="CgOrder.renSona" placeholder="申请采购理由"></el-input>
          </el-form-item>
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">
            确定
          </el-button>
        </el-form>
      </el-card>
    </el-col>




    <el-col :span="24">
      <el-card>
        <div @click="toggleExpand" style="display: flex; justify-content: space-between; align-items: center;">
          <h3>采购信息</h3>
          <p v-if="look">(点击关闭)</p>
          <p v-else>(点击查看)</p>
        </div>

        <div class="calendar-wrapper"
             :style="{
             height: !isExpanded? '250px' : '0',
             overflowX:'auto'
             }"
             :class="{ 'expand-transition': isExpanded }">
          <el-table :data="tableData"   height="250" style="width:2000px;">
            <el-table-column prop="proName" label="采购物品名称" />
            <el-table-column prop="quantity" label="采购数量" />
            <el-table-column prop="price" label="单价" />
            <el-table-column prop="review" label="高管审核状态" />
            <el-table-column prop="allocation" label="财务审核状态" />
            <el-table-column prop="delivered" label="综合购买状态" />
            <el-table-column prop="renSona" label="申请采购理由" width="150px"/>
            <el-table-column prop="renSonb" label="高管审核理由" width="150px"/>
            <el-table-column prop="renSonc" label="财务审核理由" width="150px"/>
            <el-table-column prop="renSond" label="综合部审核理由" width="150px"/>
            <el-table-column  label="撤销采购申请">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="del(scope.row)">
                  撤销
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<style lang="scss">
*{
  padding: 0;
  margin: 0;
}

.calendar-wrapper {

  padding: 0;
  transition: height 0.3s ease; /* 添加过渡效果，控制高度变化的速度和方式 */
}

</style>